import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Form, Input, Modal, Select, DatePicker } from 'antd'

const FormItem = Form.Item
const { Option } = Select
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  users,
  groups,
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
      }
      data.id = item.id
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        {item.id && <FormItem label="编号" hasFeedback {...formItemLayout}>
          {item.id}
        </FormItem>}
        <FormItem label="主题" hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.name,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="项目类型" hasFeedback {...formItemLayout}>
          {getFieldDecorator('type', {
            initialValue: item.type,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select disabled={item.id !== undefined && item.id !== null}>
            <Option key="type_0" value="0">数据协同</Option>
            <Option key="type_1" value="1">文件协同</Option>
          </Select>)}
        </FormItem>
        <FormItem label="截止日期" hasFeedback {...formItemLayout}>
          {getFieldDecorator('deadline', {
            initialValue: moment(item.deadline),
            rules: [
              {
                required: true,
              },
            ],
          })(<DatePicker />)}
        </FormItem>
        <FormItem label="项目描述" hasFeedback {...formItemLayout}>
          {getFieldDecorator('description', {
            initialValue: item.description,
          })(<TextArea />)}
        </FormItem>
        <FormItem label="协同用户" hasFeedback {...formItemLayout}>
          {getFieldDecorator('userIds', {
            initialValue: item.userIds,
          })(<Select
            mode="multiple"
            style={{ width: '100%' }}
            placeholder="请选择用户"
          >
            {users.map(d => <Option key={`user_${d.id}`} value={d.id}>{d.name}</Option>)}
          </Select>)}
        </FormItem>
        <FormItem label="协同分组" hasFeedback {...formItemLayout}>
          {getFieldDecorator('groupIds', {
            initialValue: item.groupIds,
          })(<Select
            mode="multiple"
            style={{ width: '100%' }}
            placeholder="请选择分组"
          >
            {groups.map(d => <Option key={`group_${d.id}`} value={d.id}>{d.name}</Option>)}
          </Select>)}
        </FormItem>
        <FormItem label="备注" hasFeedback {...formItemLayout}>
          {getFieldDecorator('remark', {
            initialValue: item.remark,
          })(<TextArea />)}
        </FormItem>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  users: PropTypes.array,
  groups: PropTypes.array,
  type: PropTypes.string,
  item: PropTypes.object,
  roles: PropTypes.array,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
